<template>
  <div class="xq-form-wrapper">
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <!-- <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="showUpdateModal(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`确认要删除记录吗？`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="deleteRecord(record)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
          <XqTableCell
            v-else
            :key="index"
            :record="record"
            :field="FormJson['fields'][col.dataIndex]"
            :dynamicData="dynamicData"
          />
        </template> -->
      </XqTable>
      <!-- <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="currentPage"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div> -->
    </a-spin>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
// import { retrieveReq } from "./api";

const curdMixin = new XqCurdMixin({
  //   retrieveReq,
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  data() {
    return {
      pageSize: 20,
      spinning: false,
      tableData: []
    };
  }
};
</script>
